<template>
	<template v-if="isAlready">
	  <div :id="column.id" @dblclick.stop="dblClick">
		  <template v-if="column.columnHiden!==true">
			  <template v-if="showLabel">
				  <el-form-item :label="column.label||column.name" :prop="column.isReadonly === '1'?column.id:realProp" :class="'widget-edit-'+column._editFlag+ ' '+column.widgetType+'-ctrl-style card-form-item'"
								:label-width="labelWidth?labelWidth:null" :size="column.widgetSize?column.widgetSize:size">
					  <template #label>
						  <div v-if="labelPosition==='left'" style="width: 100%;text-align: left;"><div class="leftLabel">{{column.label||column.name}}</div></div>
						  <div v-if="labelPosition==='right'" style="width: 100%;text-align: right;"><div class="rightLabel">{{column.label||column.name}}</div></div>
					  </template>
					  <ex-widget :key="column.key" :column="column" :size="size" :model="realModel" :top-model="model" :drag="drag" @changeHeight="changeHeight"/>
				  </el-form-item>
			  </template>
			  <template v-else>
				  <ex-widget :key="column.key" :column="column" :size="size" :model="realModel" :top-model="model" :drag="drag" @changeHeight="changeHeight"/>
			  </template>
		  </template>
		  <template v-if="preview">
			  <el-form-item v-if="realModel[column.code]" :label="$t('common.column_value')" class="card-form-item"
							:label-width="labelWidth?labelWidth:null" :size="column.widgetSize?column.widgetSize:size">
				  <template #label>
					  <div v-if="labelPosition==='left'" style="width: 100%;text-align: left;"><div class="leftLabel">{{column.label||column.name}}</div></div>
					  <div v-if="labelPosition==='right'" style="width: 100%;text-align: right;"><div class="rightLabel">{{column.label||column.name}}</div></div>
				  </template>
				  {{ realModel[column.code] }}
			  </el-form-item>
		  </template>
		  <div v-if="drag" class="innerDrawer">
			  <el-drawer v-model="drawerModel" size="150px;" direction="btt" :withHeader="false"
						 style="position: absolute;z-index: -1;">
				  <el-form label-width="100" label-position="right" style="padding: 10px 10px 0 10px;">
					  <el-row>
						  <el-col :span="6" class="colClass">
							  <el-form-item label="属性名称">
								  {{ column.name }} - {{column.code}}
							  </el-form-item>
						  </el-col>
						  <el-col :span="6" class="colClass">
							  <el-form-item label="显示名称">
								  <el-input size="small" v-model="column.label" placeholder="默认为属性名称"></el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="6" class="colClass">
							  <el-form-item label="存储字段">
								  <el-input size="small" v-model="column.jsonColumnCode" placeholder="存储在数据表中的字段编码(驼峰命名规则)"></el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="6" class="colClass">
							  <el-form-item>
							  是否只读&nbsp;&nbsp;
							  <ex-radio-group v-model="column.isReadonly" dict-code="IS_READONLY" size="small" @change="readonlyChange"></ex-radio-group>
							  &nbsp;&nbsp;是否必填&nbsp;&nbsp;
							  <ex-radio-group v-model="column.isRequired" dict-code="IS_REQUIRED" size="small" @change="requiredChange" :disabled="column.isReadonly==='1'"></ex-radio-group>
							  </el-form-item>
						  </el-col>

						  <el-col :span="6" class="colClass">
							  <el-form-item label="占用列">
								  <el-input-number size="small" v-model="column.colSpan" :min="0"
												   :max="24"></el-input-number>
							  </el-form-item>
						  </el-col>
						  <el-col :span="6" class="colClass">
							  <el-form-item label="空值时隐藏">
								  <el-switch
									  v-model="column.isEmptyHidden"
									  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									  :active-value="true"
									  :inactive-value="false">
								  </el-switch>
							  </el-form-item>
						  </el-col>
						  <el-col v-if="column.widgetType!=='file'" :span="6" class="colClass">
							  <el-form-item label="控件尺寸">
								  <ex-select v-model="column.widgetSize" dict-code="WIDGET_SIZE" placeholder="请选择" size="small"></ex-select>
							  </el-form-item>
						  </el-col>
						  <el-col v-if="column.widgetType!=='file'" :span="6" class="colClass">
							  <el-form-item label="宽度">
								  <el-input-number size="small" v-model="column.width" :min="100"
												   :max="1000"></el-input-number>
							  </el-form-item>
						  </el-col>
						  <template v-if="column.widgetType==='text'||column.widgetType==='textarea'">
							  <el-col :span="3" class="colClass">
								  <el-form-item label="最小长度">
									  <el-input-number size="small" v-model="column.minLength"
													   :min="0"
													   :max="300"
													   @change="lengthChange"></el-input-number>
								  </el-form-item>
							  </el-col>
							  <el-col :span="3" class="colClass">
								  <el-form-item label="最大长度">
									  <el-input-number size="small" v-model="column.maxLength"
													   :min="column.minLength" :max="300"
													   @change="lengthChange"></el-input-number>
								  </el-form-item>
							  </el-col>
						  </template>
						  <template v-if="column.widgetType==='number'">
							  <el-col :span="6" class="colClass">
								  <el-form-item label="最小值">
									  <el-input-number size="small" v-model="column.minValue"
													   :min="0"
													   :max="9999999999"></el-input-number>
								  </el-form-item>
							  </el-col>
							  <el-col :span="6" class="colClass">
								  <el-form-item label="最大值">
									  <el-input-number size="small" v-model="column.maxValue"
													   :min="column.minValue"
													   :max="9999999999"></el-input-number>
								  </el-form-item>
							  </el-col>
						  </template>

						  <template v-if="column.widgetType==='decimal'">
							  <el-col :span="6" class="colClass">
								  <el-form-item label="最小值">
									  <el-input-number size="small" v-model="column.minValue"
													   :step="0.01"
													   :precision="2"
													   :min="0.00"
													   :max="9999999999.00"></el-input-number>
								  </el-form-item>
							  </el-col>
							  <el-col :span="6" class="colClass">
								  <el-form-item label="最大值">
									  <el-input-number size="small" v-model="column.maxValue"
													   :step="0.01"
													   :precision="2"
													   :min="column.minValue"
													   :max="9999999999.99"></el-input-number>
								  </el-form-item>
							  </el-col>
						  </template>

						  <template
							  v-if="column.widgetType==='text'||column.widgetType==='textarea'||column.widgetType==='date'||column.widgetType==='datetime'||column.widgetType==='number'||column.widgetType==='decimal'">
							  <el-col :span="6" class="colClass">
								  <el-form-item label="输入提示">
									  <el-input size="small" v-model="column.placeHolder" placeholder="请输入提示信息"
												clearable></el-input>
								  </el-form-item>
							  </el-col>
						  </template>

						  <template v-if="column.widgetType==='textarea'">
							  <el-col :span="6" class="colClass">
								  <el-form-item label="行数">
									  <el-input-number size="small" v-model="column.height"
													   :min="1"
													   :max="50"></el-input-number>
								  </el-form-item>
							  </el-col>
						  </template>
						  <template v-if="column.widgetType==='file'">
							  <el-col :span="6" class="colClass">
								  <el-form-item label="附件类型">
									  <el-select v-model="column.fileType" >
										  <el-option label="不限" value=""/>
										  <el-option label="图片" value="image"/>
										  <el-option label="其它" value="other"/>
									  </el-select>
								  </el-form-item>
							  </el-col>
							  <el-col :span="6" class="colClass">
								  <el-form-item label="最大数量">
									  <el-input-number size="small" v-model="column.height"
													   :min="1"
													   :max="10"></el-input-number>
								  </el-form-item>
							  </el-col>
							  <el-col :span="6" class="colClass">
								  <el-form-item label="单文件大小">
									  <el-input-number size="small" v-model="column.maxLength"
													   :min="1" :max="10"></el-input-number>
									  MB
								  </el-form-item>
							  </el-col>
							  <el-col :span="6" class="colClass">
								  <el-form-item label="展现形式">
									  <el-select v-model="column.listType" >
										  <el-option label="默认" value="picture-card"/>
										  <el-option label="卡片" value="picture-card"/>
										  <el-option label="列表" value="text"/>
									  </el-select>
								  </el-form-item>
							  </el-col>
						  </template>
						  <el-col :span="6" class="colClass">
							  <el-form-item label="前置属性">
								  <ex-select v-model="column.preAttributeCode" dict-code="FamsColumn" placeholder="请选择" size="small"></ex-select>
							  </el-form-item>
						  </el-col>
						  <el-col v-if="column.widgetType!=='file'" :span="6" class="colClass">
							  <el-form-item label="默认值">
								  <el-switch
									  v-model="column.showOldValue"
									  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									  :active-value="true"
									  :inactive-value="false">
								  </el-switch>
								  <ex-form-item v-if="column.showOldValue!==true" size="small" :column="column" :model="model"
												:show-label="false" :drag="true"/>
							  </el-form-item>
						  </el-col>

						  <el-col v-if="column.widgetType==='cascade'" :span="6" class="colClass">
							<el-form-item label="分支">
							  <el-switch
								  v-model="column.checkStrictly"
								  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
								  :active-value="true"
								  :inactive-value="false">
							  </el-switch>
							</el-form-item>
							  <el-form-item label="数据权限">
								  <el-switch
									  v-model="column.dataPermissionProcess"
									  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									  :active-value="true"
									  :inactive-value="false">
								  </el-switch>
							  </el-form-item>
						  </el-col>

						  <el-col v-if="column.widgetType==='tree-select'" :span="6" class="colClass">
								  禁用节点
								  <el-switch
									  v-model="column.disabledNode"
									  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									  :active-value="true"
									  :inactive-value="false">
								  </el-switch>
								  多选
								  <el-switch
									  v-model="column.multiple"
									  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									  :active-value="true"
									  :inactive-value="false">
								  </el-switch>
								  数据权限
								  <el-switch
									  v-model="column.dataPermissionProcess"
									  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									  :active-value="true"
									  :inactive-value="false">
								  </el-switch>
						  </el-col>
						  <el-col v-if="column.dataSourceCode==='SysOrganization'" :span="6" class="colClass">
							  <el-form-item label="取值范围">
								  <el-select v-model="column.dataRange" >
									  <el-option label="全部" value="all"/>
									  <el-option label="管理范围内" value="manageRange"/>
									  <el-option label="管理范围外" value="excludeManageRange"/>
									  <el-option label="查看范围内" value="readRange"/>
									  <el-option label="查看范围外" value="excludeReadRange"/>
									  <el-option label="组织范围内(登录部门)" value="orgRange"/>
									  <el-option label="组织范围外(登录部门)" value="excludeOrgRange"/>
									  <el-option label="组织范围内(使用部门)" value="assetOrgRange"/>
									  <el-option label="组织范围外(使用部门)" value="excludeAssetOrgRange"/>
								  </el-select>
							  </el-form-item>
						  </el-col>
						  <el-col :span="6" class="colClass">
							<el-form-item label="总是显示">
							  <el-switch
								  v-model="column.alwaysShow"
								  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
								  :active-value="true"
								  :inactive-value="false">
							  </el-switch>
							</el-form-item>
						  </el-col>
					  </el-row>
				  </el-form>
			  </el-drawer>
		  </div>
	  </div>
	</template>
	<template v-else>
		<div class="noneclass"></div>
	</template>
  </template>
  <script>

  import ExWidget from "@/components/exFormItem/widget.vue";
  import formRule from "@/utils/formRule";
  import ExSelect from "@/components/exSelect/index.vue";
  import ExRadioGroup from "@/components/exRadioGroup/index.vue";

  export default {
	  name: "exFormItem",
	  components: {ExRadioGroup, ExSelect, ExWidget},
	  props: {
		  model: {type: Object, default: null},
		  column: {type: Object, default: null},
		  columns:{type:Array,default:[]},
		  preview: {type: Boolean, default: false},
		  showLabel: {type: Boolean, default: true},
		  labelWidth: {type: String, default: null},
		  labelPosition: {type: String, default: 'left'},
		  size: {type: String, default: ''},
		  span: {type: Number, default: 0},
		  drag: {type: Boolean, default: false},
		  fixedValue:{default: null}
	  },
	  data() {
		  return {
			  isAlready: false,
			  drawerModel: false,
			  realModel: null,
			  realProp:null,
			  isproviderAlready:true,
		  }
	  },
	  watch: {
		  model: {
			  handler() {
					if(this.isAlready===false){
						return;
					}
          			//对公时，供应商的字段必填
				  if (this.realProp&&this.realProp.includes("isPublic")){//是否对公的字段判断
					  if ("providerId" in this.realModel) {
						  let providerProp = this.realProp.replace("isPublic", "providerId");//供应商
						  if(this.realModel[this.column.code]==='1'){
							  formRule.addRequired(this.model.rules, providerProp, '供应商不能为空','');
						  }else{
							  formRule.removeRequired(this.model.rules, providerProp);
						  }
					  }
					  // if(this.model.name){
						//   this.column.isReadonly = '1';
					  // }
				  }

				  if (this.realProp&&this.realProp.includes("providerId")){//是否对公的字段判断
					  if ("isPublic" in this.realModel) {
						  if(this.realModel["isPublic"]==='1'){
							  this.isAlready = true;
						  }else{
							  this.isAlready = false;
						  }
					  }
					  // if(this.model.name){
						//   this.column.isReadonly = '1';
					  // }
				  }

				  if (this.realProp&&this.realProp.includes("processTypeId")){//判断是否包含单据处理方式
					  if (this.model._processTypes) {
						  this.column.ops=this.model._processTypes;
					  }
					  if(this.model.name){
						  this.column.isReadonly = '1';
					  }
				  }

          //资产入库卡片中根据数量和单价计算总价
          if (this.realProp&&this.realProp.includes("originalValue")){//是否对公的字段判断
            console.log('this.realModel',this.realModel)
            if ("totalPrice" in this.realModel['other']) {
              let assetCount = this.realModel['assetCount'];
              let originalValue = this.realModel['originalValue'];
              console.log(assetCount,originalValue);
                if(assetCount>0&&originalValue>0){
                  this.realModel['other']['totalPrice']=assetCount*originalValue;
                }
            }
          }

          //业务单据卡片中，如果OA已审批，则必须要上传单据的附件信息
          if (this.realProp&&this.realProp.includes("oaAudited")){//是否对公的字段判断
            console.log('this.realModel',this.realModel)
            if ("attachFiles" in this.realModel) {
              let attachFilesProp = this.realProp.replace("oaAudited", "attachFiles");//供应商
              if(this.realModel[this.column.code]==='1'){
                formRule.addRequired(this.model.rules, attachFilesProp, '单据附件必需上传','');
              }else{
                formRule.removeRequired(this.model.rules, attachFilesProp);
              }
            }
          }
			  },
			  deep: true,
			  immediate: true,
		  }
	  },
	  created() {

	  },
	mounted() {
		this.column.show = true;
		//如果存在字段权限，且权限中不包括当前字段，则不进行创建,
		if(this.model._authColumnIds&&this.model._authColumnIds.length>0&&!this.model._authColumnIds.includes(this.column.id)){
			this.column.show = this.column.alwaysShow === true;
		}
		//代表已经做过是否显示的过滤验证
		this.column._authFilterStatus = true;
		if(this.column.show===false){
			return ;
		}

	  if (!this.model.rules) {
		this.model.rules = [];
	  }

	  if(this.column.isDynamic==='1'){
      if(!this.column.dynamicCode){
        this.column.dynamicCode = 'other';
      }
		if (this.column.jsonColumnCode) {
		  if(!this.model[this.column.jsonColumnCode]){
			this.model[this.column.jsonColumnCode] = {};
		  }
		  if(!this.model[this.column.jsonColumnCode][this.column.dynamicCode]){
			this.model[this.column.jsonColumnCode][this.column.dynamicCode] = {};
		  }
		  this.realModel = this.model[this.column.jsonColumnCode][this.column.dynamicCode];
		  this.realProp = this.column.jsonColumnCode +"."+this.column.dynamicCode+"."+this.column.code;
		} else {
		  if(!this.model[this.column.dynamicCode]){
			this.model[this.column.dynamicCode] = {};
		  }
		  this.realModel = this.model[this.column.dynamicCode];
		  this.realProp = this.column.dynamicCode+"."+this.column.code;
		}
	  }else{
		if (this.column.jsonColumnCode) {
		  if(!this.model[this.column.jsonColumnCode]){
			this.model[this.column.jsonColumnCode] = {};
		  }
		  this.realModel = this.model[this.column.jsonColumnCode];
		  this.realProp = this.column.jsonColumnCode +"."+this.column.code;
		} else {
		  this.realModel = this.model;
		  this.realProp = this.column.code;
		}
	  }

	  if(!this.realModel._props){
		this.realModel._props={};
	  }

	  this.realModel._props._editFlag = this.model._editFlag;
	  this.realModel._props.assetCategoryIds = this.model.assetCategoryIds;
	  this.readonlyChange();
	  //判断是否有固定值
	  if(this.fixedValue){
		  this.realModel[this.column.code]=this.fixedValue;
	  }

	  this.column.key=this.column.id+this.realProp;

	  if(this.isproviderAlready){
		  this.isAlready = true;
	  }
	},
	methods: {
		changeHeight:function(height){
			this.$emit('changeHeight',height);
		},
		  dblClick: function () {
			  if (this.drag) {
				  this.drawerModel = true;
			  }
		  },
		  //当字段只读属性发生变化时，设置是否可编辑，并且重置对应是否必须的预览验证规则
		  readonlyChange: function () {
			  if(this.model._editFlag === false){
				  this.model.rules[this.realProp] = [];
			  }else if(this.column.isReadonly === '0'){
				  this.lengthChange();
				  this.requiredChange();
			  }
		  },
		  //当字段长度设置变化时，设置预览验证规则
		  lengthChange: function () {
			  if (this.column.widgetType === 'file') {
				  return;
			  }
			  formRule.addLength(this.model.rules, this.realProp, (this.column.label||this.column.name), this.column.minLength, this.column.maxLength);
		  },

		  //字段必填属性发生变化时，设置预览验证规则
		  requiredChange: function () {
			  if (this.column.isRequired === '0') {
				  formRule.removeRequired(this.model.rules, this.realProp);
			  } else {
			  let type = '';
			  if(this.column.widgetType==='number'||this.column.widgetType==='decimal'){
				type='number';
			  }
				  formRule.addRequired(this.model.rules, this.realProp, (this.column.label||this.column.name) + '不能为空',type);
			  }
		  },

		removeColumn() {
			let filters = this.columns.filter(item => item.id !== this.column.id);
			this.columns.splice(0, this.columns.length);
			filters.forEach(item => {
				this.columns.push(item);
			});
		},
	  }
  }
  </script>

  <style>

  .innerDrawer {
	  :deep .el-overlay {
		  position: absolute;
	  }
  }

  .colClass {
	  height: 35px;
  }

  .card-form-item{
	padding-top: 3.5px;
	  margin-left: 10px;
	  margin-right: 10px;
	  padding-bottom: 6.5px;
	  border-bottom: 1px solid #e8f1ff;
  }

  .card-form-item .el-form-item__label {
	  color: #656565;
	  /*font-size: 9pt;*/
	  font-size: 13px;

  }


  .card-form-item .el-form-item__content {
	 /* border-bottom: 1px solid #e8f1ff;*/
	  font-size: 14px;
  }
  .card-form-item .el-form-item__content   .el-input--small {
	font-size: 14px;
  }



  .widget-edit-true .el-form-item__content .el-input--small:not(.el-textarea){
	/*border-bottom: 1px solid rgba(66,124,255, 0.4);*/
	border: 1px solid #d9d9d9;
	border-radius: 4px;
  }

  .dialogsearch  .widget-edit-true .el-form-item__content {
	border-bottom: 1px solid rgba(92,114,180, 0.4);
  }

  .dialogsearch .el-form-item__content .el-input--small:not(.el-textarea) {
    /* border-bottom: 1px solid rgba(66, 124, 255, 0.4); */
    border: 1px solid #d9d9d9;
    border-radius: 4px;
	padding: 3px;
}

  .file-ctrl-style .el-form-item__content {
	  border-bottom: 0px solid #e8f1ff;
  }



 .card-form-item .el-input__wrapper {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .card-form-item .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .el-form-item.is-error .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .card-form-item .el-select .el-input .el-input__wrapper {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .card-form-item .el-select .el-input .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .el-form-item.is-error .el-select .el-input.is-focus .el-input__wrapper {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .dialogsearch .card-form-item .el-input__wrapper{
	  box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset!important;
  }


  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label{
	color: red;
  }

  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before{
	  display: none;
  }

  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::after, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label .leftLabel::after{
	 /*
	content: '*';
	  color: #F56C6C;
	  margin-left: 4px;
	  */
  }
  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label .rightLabel{
	color: red;
  }

  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label .rightLabel::before{
	  /*
	content: '*';
	  color: #F56C6C;
	  margin-left: 4px;
	  */
  }

  .el-form-item__content:has(.fileTemp){
	border-color: #FFF !important;
  }

  .cardContent .card-form-item .el-form-item__label {
	  color: #5b6bb3;
	  /*font-size: 9pt;*/
	  font-size: 14px;

  }


  .cardContent .card-form-item .el-form-item__content {
	  font-size: 14px;

  }
  .cardContent .card-form-item .el-form-item__content   .el-input--small {
	font-size: 14px;
	height: 31.6px;
	line-height: 31.6px;
  }

  .cardContent .card-form-item .el-form-item__content  .el-date-editor--date{
	padding-top: 3px;
	  padding-right: 3px;
	height: 31.6px;
	line-height: 31.6px;
  }


  .cardContent .card-form-item .el-form-item__content .el-select--small{

  }
  .cardContent .card-form-item .el-form-item__content .el-select--small .el-input--small{
	height: 31.6px;
	line-height: 31.6px;
  }

  .el-form-item--small .el-form-item__content {
	line-height: 31.6px;
  }

  .cardContent .card-form-item  .leftLabel,  .cardContent .card-form-item  .rightLabel{
	line-height: 31.6px;
  }
  </style>
